<template>
	<div class="card-body">
		<vee-observer v-slot="{invalid, validate}">
			<form @submit.prevent="validate().then(updatePassword)">
				<div class="form-group row">
					<label for="password" class="col-md-3 col-form-label text-md-right">新密码</label>
					<div class="col-md-7">
						<vee-validator name="新密码" rules="required|min:6|max:255" v-slot="{errors}" vid="confirmation">
							<input
								id="new_password"
								type="password"
								class="form-control"
								v-model="new_password"
								required
								autocomplete="current-password"
								:class="{'is-invalid':errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row">
					<label for="password" class="col-md-3 col-form-label text-md-right">确认新密码</label>
					<div class="col-md-7">
						<vee-validator
							name="确认新密码"
							rules="required|min:6|max:255|confirmed:confirmation"
							v-slot="{errors}"
							ref="back_err"
						>
							<input
								id="new_password_confirm"
								type="password"
								class="form-control"
								v-model="new_password_confirm"
								required
								autocomplete="current-password"
								:class="{'is-invalid':errors[0]}"
							>
							<span v-show="errors[0]" class="invalid-feedback" role="alert">
								<strong>{{errors[0]}}</strong>
							</span>
						</vee-validator>
					</div>
				</div>

				<div class="form-group row mb-0">
					<div class="col-md-8 offset-md-3">
						<button type="submit" class="btn btn-primary" :disabled="invalid">更新密码</button>
						<button @click="cancel" class="btn btn-secondary">取消更改</button>
					</div>
				</div>
			</form>
		</vee-observer>
	</div>
</template>

<script>
export default {
	data() {
		return {
			new_password: "",
			new_password_confirm: ""
		};
	},
	methods: {
		updatePassword() {
			let formData = {
				new_password: this.new_password
			};
			this.$store.dispatch("updatePasswordRequest", formData).then(res => {
				this.$router.push({ name: "profile" });
			});
		},
		cancel() {
			this.$router.push({ name: "profile" });
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
